<template>
	<div>
		<van-nav-bar :style="hidden?'position: absolute !important':''" :title="title" :left-arrow="leftArrow"
			:class='hidden?"hidden":"open"'  @click-left="goback">
			<template #left>
				<div class="van-nav-bar__left"><img src="../assets/imgs/home/logo.webp" class="navbar-logo"></div>
				<div style="margin-left:45px;font-weight:500;color:#fff">TRONAS</div>
			</template>
			<template #right>
				<div v-if="hidden">
					<img src="../assets/imgs/tabs/lang.png" @click="show = true" style="width: 20px;height :20px;margin-right: 10px;">
					<img @click="$router.push('noticelist')" src="../assets/imgs/tabs/noticew.png" style="width: 20px;height: 20px;margin-right: 10px;">
					<img @click='downloadurl' src="../assets/imgs/tabs/kf.png" style="width: 20px;height: 20px;">
				</div>
				<div v-else style="display: flex;align-items: center;">
					<img src="" @click="downloadurl" style="width:18px;height:18px;margin-right:10px;">
					<img  src="../assets/imgs/tabs/lang.png" @click="show = true"
						style="width: 20px;height :20px;margin-right: 10px;">
						<img @click="$router.push('noticelist')" src="../assets/imgs/tabs/noticew.png" style="width: 20px;height: 20px;margin-right: 10px;">
					<img    @click='downloadurl' src="../assets/imgs/tabs/kf.png" style="width: 20px;height: 20px;">
				</div>

			</template>
		</van-nav-bar>
		<van-action-sheet v-model="show" :actions="actions" :cancel-text="$t('textTrans.取消')" close-on-click-action
			@select="getLang" @cancel="show = false" />
	</div>
</template>

<script>
	import {
		userInfo,
		download,
		account
	} from "@/api/personal";
	export default {
		props: ["title", "leftArrow", "leftText", "change", "rightText", "goUrl", "hidden"],
		data() {
			return {
				// 英语 :' Inglés',
				// 阿拉伯 :' árabe ',
				// 西班牙:' Español ',
				// 葡萄牙:' Portugués',
				// 印度尼西亚:' Indonesio ',
				// 韩语:' Coreano ',
				// 日语:' Japonés',
				// 土耳其:' Turco ',
				// 中文繁体:' Tradición china',
				// 法国:' Francés',
				// 德国:
				moneydata:{},
				show: false,
				actions: [{
					name: this.$i18n.t("textTrans.英语"),
				}, {
					name:  this.$i18n.t("textTrans.阿拉伯"),
				}, {
					name:  this.$i18n.t("textTrans.德国"),
				}, {
					name: this.$i18n.t("textTrans.西班牙"),
				}, {
					name: this.$i18n.t("textTrans.法国"),
				}, {
					name:  this.$i18n.t("textTrans.印度尼西亚"),
				}, {
					name:  this.$i18n.t("textTrans.日语"),
				}, {
					name: this.$i18n.t("textTrans.韩语"),
				}, {
					name: this.$i18n.t("textTrans.葡萄牙"),
				}, {
					name: this.$i18n.t("textTrans.土耳其"),
				}, {
					name: this.$i18n.t("textTrans.中文繁体"),
				}],
			};
		},
		created() {
			if(localStorage.getItem('usertoken')){
			download().then((res) => {
				this.moneydata = res;
			});
			}
		},
		mounted() {},
		methods: {
			downloadurl(){
				window.location.href = this.moneydata.download_url
			},
			goback() {
				this.$router.go(-1);
			},
			getLang(e) {
				console.log('------------'+e.name)
				if (e.name == this.$i18n.t("textTrans.英语")) {
					this.$i18n.locale = 'en';
					localStorage.setItem('lanage', '1')
					localStorage.setItem('lanagetype', 'en')
				} else if (e.name == this.$i18n.t("textTrans.阿拉伯")) {
					this.$i18n.locale = 'alb';
					localStorage.setItem('lanage', '8')
					localStorage.setItem('lanagetype', 'alb')
				} else if (e.name == this.$i18n.t("textTrans.德国")) {
					this.$i18n.locale = 'dg';
					localStorage.setItem('lanage', '5')
					localStorage.setItem('lanagetype', 'dg')
				} else if (e.name == this.$i18n.t("textTrans.西班牙")) {
					this.$i18n.locale = 'xby';
					localStorage.setItem('lanage', '10')
					localStorage.setItem('lanagetype', 'xby')
				} else if (e.name == this.$i18n.t("textTrans.法国")) {
					this.$i18n.locale = 'fg';
					localStorage.setItem('lanage', '7')
					localStorage.setItem('lanagetype', 'fg')
				} else if (e.name == this.$i18n.t("textTrans.印度尼西亚")) {
					this.$i18n.locale = 'yn';
					localStorage.setItem('lanage', '3')
					localStorage.setItem('lanagetype', 'yn')
				} else if (e.name == this.$i18n.t("textTrans.日语")) {
					this.$i18n.locale = 'rb';
					localStorage.setItem('lanage', '6')
					localStorage.setItem('lanagetype', 'rb')
				} else if (e.name == this.$i18n.t("textTrans.韩语")) {
					this.$i18n.locale = 'hg';
					localStorage.setItem('lanage', '4')
					localStorage.setItem('lanagetype', 'hg')
				} else if (e.name == this.$i18n.t("textTrans.葡萄牙")) {
					this.$i18n.locale = 'pty';
					localStorage.setItem('lanage', '2')
					localStorage.setItem('lanagetype', 'pty')
				} else if (e.name ==  this.$i18n.t("textTrans.土耳其")) {
					this.$i18n.locale = 'trq';
					localStorage.setItem('lanage', '9')
					localStorage.setItem('lanagetype', 'trq')
				} else if (e.name == this.$i18n.t("textTrans.中文繁体")) {
					this.$i18n.locale = 'zhf';
					localStorage.setItem('lanage', '11')
					localStorage.setItem('lanagetype', 'zhf')
				}
				location.reload();
			},
			changeLang() {
				this.show = true;
			},
		},
	};
</script>

<style lang="less" scoped>
	.btn {
		position: relative;
		display: inline-block;
		text-align: center;
		border: none;
		outline: none;
		transition: opacity .2s
	}

	.btn-download-app {
		width: 5.33333vw!important;
		min-width: 5.33333vw;
		height: 5.33333vw;
		padding: 0;
		background: url() no-repeat 50% 50%/contain!important
	}

	.btn-download-app {
		min-width: 17.33333vw;
		padding: 0 1.33333vw;
		border-radius: .8vw;
		text-align: center
	}

	.btn-download-app .icon {
		margin-right: 1.06667vw;
		display: inline-block;
		vertical-align: middle;
		width: 3.2vw;
		height: 3.2vw;
		background: url(https://troncwd.com/assets/img/icon-download-app.1801d181.svg);
		background-size: contain
	}

	.van-nav-bar__left {
		position: absolute;
		top: 0;
		bottom: 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 0 4.26667vw;
		font-size: 3.73333vw;
		cursor: pointer
	}
	.van-nav-bar__left:active,.van-nav-bar__right:active {
    	opacity: .7
	}

	.van-nav-bar__left {
		left: 0
	}
	.navbar-logo {
		width: auto;
		height: 10.66667vw;
	}
	/deep/.van-icon {
		color: #fff;
	}

	/deep/.van-nav-bar__text {
		color: #fff;
	}

	.van-nav-bar__title {
		color: #fff;
	}

	.van-nav-bar__text {
		color: #fff;
	}
	/deep/.van-icon {
			color: #fff;
		}
	/deep/.van-nav-bar {
		width: 100%;
		background: transparent;
		background-position: center;
	}

	/deep/ .open {
		/deep/.van-nav-bar {
			width: 100%;
			background: transparent;
			background-position: center;
		}
		
		/deep/.van-nav-bar {
			width: 100%;
			position: absolute !important;
			background: transparent;
			// background-position: center;
		
		}
		
		/deep/.van-icon {
			color: #fff;
		}
		
		/deep/.van-nav-bar__text {
			color: #fff;
		}
		
		.van-nav-bar__title {
			color: #fff;
		}
		
		.van-nav-bar__text {
			color: #fff;
		}
	}


	/deep/ .hidden {
		background: transparent !important;

		/deep/.van-nav-bar {
			width: 100%;
			position: absolute !important;
			background: transparent;
			// background-position: center;

		}

		/deep/.van-icon {
			color: #fff;
		}

		/deep/.van-nav-bar__text {
			color: #fff;
		}

		.van-nav-bar__title {
			color: #fff;
		}

		.van-nav-bar__text {
			color: #fff;
		}

		// /deep/.van-nav-bar__content{
		// 	position: absolute  !important;
		// }
	}
	
</style>
